<template>
  <div class="main-layout">
    <!-- 顶栏 -->
    <header class="main-header">生产管理系统</header>
    <div class="main-body">
      <!-- 侧栏 -->
      <aside class="main-aside">
        <el-menu :default-active="activeMenu" @select="handleMenuSelect">
          <el-menu-item index="person">人员信息管理</el-menu-item>
          <el-menu-item index="material">物料信息管理</el-menu-item>
          <el-menu-item index="device">设备信息管理</el-menu-item>
          <el-menu-item index="product">产品信息管理</el-menu-item>
          <el-menu-item index="supplier">供应商信息管理</el-menu-item>
          <el-menu-item index="dept">部门管理</el-menu-item>
          <el-menu-item index="productionPlan">生产计划管理</el-menu-item>
        </el-menu>
      </aside>
      <!-- 核心工作区 -->
      <main class="main-content">
        <component :is="currentComponent" />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ProductView from './ProductView.vue'
import PersonView from './PersonView.vue'
import MaterialView from './MaterialView.vue'
import DeviceView from './DeviceView.vue'
import ProductionPlanView from './ProductionPlanView.vue'
import DeptView from './DeptView.vue'

const componentsMap = {
  person: PersonView,
  material: MaterialView,
  device: DeviceView,
  product: ProductView,
  supplier: 'SupplierManage',
  dept: DeptView,
  productionPlan: ProductionPlanView
}

const activeMenu = ref('person')
const handleMenuSelect = (key: string) => {
  console.log(key)
  activeMenu.value = key
}
const currentComponent = computed(() => {
  let key = activeMenu.value as keyof typeof componentsMap
  console.log(componentsMap[key]);
  
  return componentsMap[key]
})
</script>

<style scoped>
.main-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f0f4fa 0%, #e9efff 100%);
}
.main-header {
  width: 100vw;
  min-width: 100vw;
  background: #409EFF;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 3px;
  height: 64px;
  line-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  z-index: 10;
}
.main-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.main-aside {
  width: 180px;
  background: #fff;
  border-right: 1.5px solid #e0e6ed;
  box-shadow: 2px 0 8px rgba(64,158,255,0.04);
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  min-height: 0;
}
.el-menu {
  border-right: none;
  background: transparent;
}
.el-menu-item {
  border-radius: 8px;
  margin: 8px 12px;
  font-size: 14px;
  transition: background 0.2s;
}
.el-menu-item.is-active,
.el-menu-item:hover {
  background: #e3f0ff !important;
  color: #409EFF !important;
}
.main-content {
  flex: 1 1 auto;
  background: #f9fbfd;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  margin: 0;
  box-shadow: 0 2px 16px rgba(64,158,255,0.07);
  overflow: auto;
}
@media (max-width: 900px) {
  .main-aside {
    width: 50px;
    padding-top: 8px;
  }
  .main-content {
    margin: 0;
    padding: 0;
  }
  .main-header {
    font-size: 18px;
    height: 48px;
    line-height: 48px;
  }
}
</style>